<template>
  <div>
    <div id = "computed_props">
    千米 : <input type = "number" v-model = "kilometers">
    米 : <input type = "number" v-model = "meters">
</div>
<p id="info"></p>
  </div>
</template>

<script>
export default {
  name: 'watchMe',
  data () {
    return {
      kilometers: 0,
      meters: 0
    }
  },
  methods: {},
  computed: {},
  watch: {
    kilometers: function (value) {
      this.kilometers = value
      this.meters = this.kilometers * 1000
    },
    meters: function (value) {
      this.kilometers = value / 1000
      this.meters = value
    }
  }
}
</script>
